<template>
    <Titlebar></Titlebar>
    <div class="signIn">
        <div class="react">
            <div class="react-content">
                <p>检测劳保用品、特种作业证等物品的一个小软件，希望可以给大家带来便利，快速的办公体验！</p>
                <p class="group">——信息化小组</p>
            </div>
        </div>
        <div class="login">
                    <div class="signTitle">欢迎回来</div>
                    <el-form
                        class="logInRef"
                        ref="logInRef"
                        :rules="rules"
                        :model="staffInfo"
                    >
                        <el-form-item prop="userId" size="large" class="user">
                            <input placeholder="请输入工号" v-model="staffInfo.userId" />
                        </el-form-item>
                        <el-form-item prop="userPassword" size="large" class="user">
                            <input placeholder="请输入密码" :type="secret" v-model="staffInfo.userPassword"/>
                            <img @click="securitycode" :src="flag === true ? open: close" alt="无图片">
                        </el-form-item>
                    </el-form>
                    <div class="signButton">
                        <el-button type="primary"  size="large" @click="logIn(logInRef)">开始使用</el-button>
                    </div>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, onMounted, onBeforeUnmount, getCurrentInstance} from 'vue'
import {useRouter} from 'vue-router'
import store from "../store";
//vite与webpack导入样式的方法不一样
import close from '@/assets/close.png'
import open from '@/assets/open.png'
let router = useRouter()
let staffInfo = reactive({
    userId:'',
    userPassword:'',
});

const logInRef = ref()
const rules = reactive({
    userId: [{required: true,message: '不能为空!',trigger: 'blur',},],
    userPassword: [{ required: true, message: '不能为空!', trigger: 'blur' },],
});
const logIn = async (formEl) => {
    if (!formEl) return;
    try {
        await formEl.validate((valid, fields) => {
            if (valid) {
                store.dispatch("logIn", staffInfo);
            }
        });
    }catch(err){
        console.log(err);
    }
}
onMounted(()=>{
    logInRef.value = getCurrentInstance().proxy.$refs.logInRef;
    window.addEventListener("keydown", keyDown);
})

onBeforeUnmount(()=>{
    window.removeEventListener("keydown", keyDown, false);
})
function keyDown(e) {
    if (e.keyCode === 13)
        logIn(logInRef.value);
}
//密码开闭
let secret = ref('password')
let flag = ref(true)
function securitycode(){
    if(flag.value === true) {
        secret.value = 'text'
    }else {
        secret.value = 'password'
    }
    flag.value = !flag.value
}
</script>

<style scoped lang="scss">
.signIn{
    width: 100%;
    height: calc(100% - 53px); //由于顶部占面积
    display: flex;
    flex-direction: row;
    .react{
        width: 60%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .react-content{
            display: flex;
            justify-content: center;
            flex-direction: column;
            padding: 20px;
            font-weight: 550;
            color: white;
            font-size: 24px;
            border-radius: 20px;
            width: 60%;
            height: 50%;
            background: var(--theme-background-color);
            .group{
                text-align: right;
            }
        }
    }
    .login{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 40%;
        height: 100%;
        .signTitle{
            width: 320px;
            margin: 10px;
            font-size: 16px;
            font-weight: bolder;
            color: #000000;
        }
        .user{
            position: relative;
            input{
                width: 320px;
                font-size:16px;
                font-weight: 600;
                color: #000000;
                background: #f5f2f2;
                padding:1px; //不加padding光标不见了
                height: 40px;
                border: 2px solid transparent;
                border-radius: 5px;
            }
            input:focus{
                border-color: #00a4ff;
                outline: none;
            }
            //为了使得placehold适用于更多的设备
            input::-webkit-input-placeholder {  /* WebKit browsers*/
                color: #969595;
                font-size: 14px;
            }
            input:-moz-input-placeholder {   /* Mozilla Firefox 4 to 18*/
                color: #969595;
                font-size: 14px;
            }
            input::-moz-input-placeholder {  /* Mozilla Firefox 19+*/
                color: #969595;
                font-size: 14px;
            }
            input:-ms-input-placeholder { /* Internet Explorer 10+*/
                color: #969595;
                font-size: 14px;
            }
            img{
                position: absolute;
                right: 10px;
                width: 25px;
            }
        }
        .signButton{
            width: 320px;
            .el-button{
                width: 320px;
            }
        }
    }
}
</style>
